<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <include file="public@head" />

    <style>
        .sc_chat_wra{
            height: 500px;
            overflow: auto;
        }
        .sub_comment_list .comment{
            padding: 10px 0 8px;
            line-height: 20px;
            color: #666;
        }
        .auth_comment .comment,.auth_comment .sub_tool_group{
            padding-left: 44px;
        }

        .sub_tool_group{
            margin-bottom: 14px;
        }

        .sub_tool_group .reply_btn{
            color: #669966;
            cursor: pointer;
        }

        .sub_comment_list{
            border-left: 1px solid #e8e8e8;
            margin-left: 44px;
            padding-left: 16px;
        }

        .sub_comment .name{
            color: #80aa9d;
            margin-right: 14px;
        }

        .detail_title{
            position: relative;
        }
        .back_btn{
            position: absolute;
            left: 0;
            padding-left: 44px;
            background: url("__TMPL__public/assets/img/icon_back.png") no-repeat 12px center;
            color: #999;
        }
        .back_btn:hover{
            color: #333;
            /*color: #5cdb96;*/
        }

        .new_comment{
            width: 638px;
            display: block;
            margin: 0 auto;
        }
        .user_input_wrap .user_input{
            outline: none;
            resize:none;
            /*border-style: none;*/
            box-shadow: none;
            text-decoration: none;
            /*border-width: 0px;*/
            word-wrap: break-word;
            /*line-height: 18px;*/
            padding: 12px 6px 0 10px;
            /*width: 580px;*/
            height: 44px;
            line-height: 18px;
            border: 1px solid #ccc;
            background: #f9f9f9;
            border-radius: 4px;
            overflow: auto;
            display: block;
            box-sizing: border-box;
            width: 100%;

        }

        .new_comment span.cancel_btn,.main_comment span.cancel_btn{
            color: #999;
            font-size: 16px;
            margin-top: 26px;
            cursor: pointer;

        }
        .new_comment span.send_btn,.main_comment span.send_btn{
            width: 68px;
            height: 40px;
            line-height: 40px;
            color: #fff;
            text-align: center;
            background: #04dd98;
            margin: 14px 0 0 30px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;

        }
    </style>
</head>
<body>
<include file="public@nav" />
<div class="center ss_wra clearfix">
    <include file="public@starmessnav" />
    <div class="an_right_wra ss_right_wra fr">
        <h3 class="detail_title"><span class="name_send">刘涛</span></h3>
        <div class="sc_chat_wra">

        </div>
        <div class="new_comment clearfix">
            <div class="clearfix user_input_wrap">
                <textarea placeholder="" name="" id="" class="user_input" cols="30" rows="10"></textarea>
            </div>
            <span class="fr send_btn">回复</span>
            <span class="fr cancel_btn">取消</span>
        </div>
    </div>
</div>

<include file="public@footer" />
<include file="public@scripts" />
<script>
    headerMove(3);

    var u_sid = iService.getQueryString("u_sid"),
        u_name = iService.getQueryString("u_name");

    $(".secret_page").on("click",function(){
        window.location.href = "../Message/starSecret.html?u_sid="+u_sid+"&u_name="+u_name;
    });

    $(".leave_page").on("click",function(){
        window.location.href = "../Message/starLeave.html?u_sid="+u_sid+"&u_name="+u_name;
    });

    var comment_input = $(".user_input");
    comment_input.on("focus",function(){
        $(this).stop().animate({"height":"100px"}, "fast");
    });
    comment_input.on("blur",function(){
        if($(this).val()==""){
            $(this).stop().animate({"height":"44px"}, "fast");
        }
    });


    $(".name_send").html(u_name);
    var private_param = {
        url:'Messages/privateContent',
        data:{
            suid: u_sid,
            page:1,
            star:0

        }
    };
    $.JsonRpc(private_param,function(data){
        data = data.data.list;
        var tpl = "";
        $.each(data,function(i){
            if(localStorage.udid!=data[i].c_udid){
                tpl +=
                    '<div class="clearfix">' +
                    '<div class="sc_chat_star clearfix">'+
                    '<img class="fl" src="'+data[i].cavatar+'" alt="">'+
                    '<div class="sc_bubble_wra fl">'+
                    '<p class="sc_bubble_txt">'+data[i].c_content+
                    '<span class="sc_bubble_icon"></span>'+
                    '</p><br />'+
                    '<span class="fl sc_send_time">'+data[i].c_createtime.slice(0,16)+'</span>'+
                    '</div>'+
                    '</div>'+
                    '</div>' +
                    '</div>';
            }else {
                tpl +=
                    '<div class="clearfix">' +
                    '<div class="sc_chat_user fr">'+
                    '<img class="fr" src="'+data[i].cavatar+'" alt="">'+
                    '<div class="sc_bubble_wra fl">'+
                    '<p class="sc_bubble_txt">'+data[i].c_content+
                    '<span class="sc_bubble_icon"></span>'+
                    '</p><br />'+
                    '<span class="sc_send_time fr">'+data[i].c_createtime.slice(0,16)+'</span>'+
                    '</div>'+
                    '</div>'+
                    '</div>';
            }
        });
        $(".sc_chat_wra").html(tpl);

        $(".send_btn").on("click",function(){
            var comList_param = {
                url:'Circles/comSend',
                data:{
                    cid: u_sid,
                    description: $(".user_input").val(),
                    parent: localStorage.udid,
                    pudid: u_sid,
                    type: 40
                }
            };
            $.JsonRpc(comList_param,function(data){
                if(data.code==200){
                    var tpl =
                            '<div class="clearfix">' +
                            '<div class="sc_chat_user fr">'+
                            '<img class="fr" src="'+localStorage.u_avatar+'" alt="">'+
                            '<div class="sc_bubble_wra fl">'+
                            '<p class="sc_bubble_txt">'+data.content.description+
                            '<span class="sc_bubble_icon"></span>'+
                            '</p><br />'+
                            '<span class="sc_send_time fr">'+ new Date(parseInt(data.time) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ')+'</span>'+
                            '</div>'+
                            '</div>'+
                            '</div>';
                    $(tpl).appendTo(".sc_chat_wra");
                    $(".user_input").val("");
                }
            });
        });


    })



</script>
</body>
</html>